import React, { PureComponent } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { RNCloseModule } from 'react-native-cgws-support';

import Button from './Button';
import { getColors } from '../theme';
import { widthScale } from '../constants';

class LoginFailureDialog extends PureComponent {
  render() {
    const { visible = false } = this.props.loginFailure;
    if (!visible) {
      return null;
    }
    return (
      <View style={styles.container}>
        <View
          style={[
            styles.innerContainer,
            { backgroundColor: getColors().base_oc_18 },
          ]}
        >
          <Text style={[styles.title, { color: getColors().base_fc_5 }]}>
            您的登录状态已失效
          </Text>

          <View
            style={[styles.bottom, { borderTopColor: getColors().base_lc_1 }]}
          >
            <Button
              style={styles.button}
              titleStyle={[
                styles.buttonTitle,
                { color: getColors().base_fc_2 },
              ]}
              title={'确定'}
              onPress={() => {
                RNCloseModule.close();
              }}
            />
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 100,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
  },
  innerContainer: {
    borderRadius: 12,
    width: 270 * widthScale,
    alignItems: 'center',
  },
  title: {
    marginVertical: 20,
    marginHorizontal: 35,
    fontSize: 17,
    textAlign: 'center',
    fontWeight: 'bold',
  },
  bottom: {
    flexDirection: 'row',
    height: 45,
    borderColor: 'transparent',
    borderWidth: 1,
  },
  button: {
    flex: 1,
  },
  buttonTitle: {
    fontSize: 17,
  },
});

const mapStateToProps = state => ({
  loginFailure: state.common.loginFailure,
});

export default connect(
  mapStateToProps,
  null
)(LoginFailureDialog);
